<template>
	<view class="container">
		<map class="map" id="map" ref="map" 
		:scale="scale" 
		:markers="markers"
		:longitude='longitude'
		:latitude='latitude'
		@markertap="chooseMarker" 
		show-location></map>
		
		<view class="publishBtn" @click="routeToPublish">
			
		</view>
		<button plain class="publishBtn" @getuserinfo="getUserInfo" open-type="getUserInfo" lang="zh_CN">发布</button>
		
		<view class="selfPos" @click="moveToPos">
			<image src="../../../static/images/map/pos.png" mode=""></image>
			
		</view>
		
		<!-- 商家详情 -->
		<view class="compDetailWrap" :class="{showBox:showBox}">
			<image src="../../../static/images/goods3.png" mode=""></image>
			<view class="con">
				<view class="tit">东莞市环源再生资源回收有限公司</view>
				<view class="detailItem">
					<text>简介：</text>
					<text>专注各类二手废旧设备，整厂设备回收，报废厂整体拆除回收等</text>
				</view>
				<view class="detailItem">
					<text>地址：</text>
					<text>东莞市望牛墩镇李屋村工业区边海路3号</text>
				</view>
				<view class="detailItem">
					<text>联系人：</text>
					<text>刘经理</text>
				</view>
				<view class="detailItem">
					<text>电话：</text>
					<text>135-2865-7196</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let vm;
let mapContext;
const iconPath = `../../../static/images/map/comp.png`; //企业图标
export default {
	data() {
		return {
			showBox:false,
			markers:[
				{
					company_address: "习友路5999号",
					company_contact: "1",
					company_id: "40289fcb782746e30178274705da0004",
					company_lat: 31.763321,
					company_long: 117.270172,
					company_name: "清华大学合肥公共安全研究院",
					company_note: "1",
					company_tel: "1",
					markerId:1
				},
				{
					company_address: "习友路5999号",
					company_contact: "1",
					company_id: "40289fcb782746e30178274705da0004",
					company_lat: 31.763321,
					company_long: 117.170172,
					company_name: "清华大学合肥公共安全研究院",
					company_note: "1",
					company_tel: "1",
					markerId:2
				},
				{
					company_address: "习友路5999号",
					company_contact: "1",
					company_id: "40289fcb782746e30178274705da0004",
					company_lat: 31.763321,
					company_long: 117.370172,
					company_name: "清华大学合肥公共安全研究院",
					company_note: "1",
					company_tel: "1",
					markerId:3
				},
				{
					company_address: "习友路5999号",
					company_contact: "1",
					company_id: "40289fcb782746e30178274705da0004",
					company_lat: 31.963321,
					company_long: 117.270172,
					company_name: "清华大学合肥公共安全研究院",
					company_note: "1",
					company_tel: "1",
					markerId:4
				},
				{
					company_address: "习友路5999号",
					company_contact: "1",
					company_id: "40289fcb782746e30178274705da0004",
					company_lat: 32.763321,
					company_long: 117.270172,
					company_name: "清华大学合肥公共安全研究院",
					company_note: "1",
					company_tel: "1",
					markerId:5
				},
				{
					company_address: "习友路5999号",
					company_contact: "1",
					company_id: "40289fcb782746e30178274705da0004",
					company_lat: 31.763321,
					company_long: 113.270172,
					company_name: "清华大学合肥公共安全研究院",
					company_note: "1",
					company_tel: "1",
					markerId:6
				},
				{
					company_address: "习友路5999号",
					company_contact: "1",
					company_id: "40289fcb782746e30178274705da0004",
					company_lat: 33.763321,
					company_long: 117.270172,
					company_name: "清华大学合肥公共安全研究院",
					company_note: "1",
					company_tel: "1",
					markerId:7
				},
				
			],
			scale:10,
			latitude:'',
			longitude:'',
		};
	},
	watch: {
		
	},
	onLoad() {
		vm = this
		
		vm.getPointList()
		
	},
	onShow() {
		vm.showBox = false
	},
	mounted() {
		this.$nextTick(()=>{
			mapContext = uni.createMapContext('map', this);
			
			
			uni.getLocation({
				// 默认定位到用户位置
				type: 'gcj02',
				success: function(res) {
					vm.longitude = res.longitude;
					vm.latitude = res.latitude
				}
			});
		})
	},
	beforeDestroy() {
		this.markers = []
		this.newMarkers = []
	},
	methods: {
		getUserInfo() {
			uni.getStorage({
				key:'userInfo',
				success(data) {
					if(data.data.tel){
						uni.navigateTo({
							url:'../../publish/publish'
						})
					}else{
				
						uni.showModal({
						    title: '提示',
						    content: '请先注册用户信息',
						    success: function (res) {
						        if (res.confirm) {
						            uni.navigateTo({
						            	url:'../../register/register'
						            })
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
					
				},
				fail(err) {
					// 小程序获取用户昵称头像等信息
					uni.getUserInfo({
						lang:'zh_CN',
						success: res => {
							console.log(res)
							uni.setStorage({
								key:'userInfo',
								data:res.userInfo,
								success() {
									uni.showModal({
									    title: '提示',
									    content: '请先注册用户信息',
									    success: function (res) {
									        if (res.confirm) {
									            uni.navigateTo({
									            	url:'../../register/register'
									            })
									        } else if (res.cancel) {
									            console.log('用户点击取消');
									        }
									    }
									});
								}
							})
						}
					});
				}
			})
			
		},
		moveToPos() {
			mapContext.moveToLocation()
		},
		getPointList() {
			// this.$api.getPointList()
			// .then(res => {
			// 	vm.showMarkers(res)
			// })
			vm.showMarkers(this.markers)
		},
		chooseMarker(e) {
			vm.showBox = true
			console.log('e.detail.markerId',e.detail.markerId)
			let curMarker = vm.markers.filter(item => item.id == e.detail.markerId)
			mapContext.moveToLocation({
				latitude:curMarker[0].latitude,
				longitude:curMarker[0].longitude
			})
		},
		initMap(curType) {
			
		},
		showMarkers(markersArr) {
			vm.markers = [];
			markersArr.forEach((item, index) => {
				vm.markers.push({
					// title,
					id: item.markerId,
					company_id: item.company_id,
					latitude: item.company_lat,
					longitude: item.company_long,
					iconPath,
					width: 30,
					height: 30,
				});
				
			});
			console.log('vm.markers',vm.markers)
		}
	}
};
</script>

<style lang="scss">

	
.map {
	width: 100%;
	height: 100vh;
}
.selfPos{
	position: absolute;
	background: #fff;
	border-radius: 10rpx;
    width: 60rpx;
    height: 60rpx;
    line-height: 70rpx;
	text-align: center;
	right: 40rpx;
	bottom: 180rpx;
	image{
		width: 30rpx;
		height: 30rpx;
	}
}
.publishBtn{
	position: absolute;
	left: 40rpx;
	right: 40rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	bottom: 80rpx;
	background: $uni-main-theme-color;
	border-radius: 10rpx;
}
.compDetailWrap{
	position: absolute;
	top: -520rpx;
	left: 20rpx;
	right: 20rpx;
	background: #fff;
	border-radius: 10rpx;
	box-shadow: 0 0 10rpx 10rpx #F5F5F5;
	display: flex;
	align-items: center;
	padding: 30rpx;
	transition: all .3s;
	image{
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	.tit{
		font-size: 30rpx;
	}
	view{
		text{
			&:first-child{
				color: #222;
			}
			&:last-child{
				color: #666;
			}
		}
	}
	&.showBox{
		top: 20rpx;
	}
}
</style>
